<template>
  <el-container>
    <el-aside style="width: auto">
      <NavAside :collapse="isCollapse"/>
    </el-aside>
    <el-container>
      <el-header>
        <NavHeader v-model:collapse="isCollapse"/>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang='ts'>
import { ref } from 'vue'
import NavAside from './src/NavAside/NavAside.vue'
import NavHeader from './src/NavHeader/NavHeader.vue'

</script>

<script lang='ts' setup>
// 折叠收起
const isCollapse = ref(false)
const toggle = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<style lang='scss' scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-header {
  padding-top: 10px !important;
  border-bottom: 1px solid #eee;
}
</style>